<!-- NewPracticeCompanySearchList_Win.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>企业列表信息win</title>
    <link rel="stylesheet" href="../../css/mui.min.css"/>
    <link rel="stylesheet" href="../../css/base.css"/>
    <link rel="stylesheet" href="../../css/CFNetPP_Base.css">
    <style type="text/css">
        .search-bar-div{
            height: 54px;
            margin-top: 66px;
            position: relative;
            padding: 10px 40px;
        }
        .search-div{
            margin-left: 10px;
            width: calc(100% - 74px);
        }
        .mui-input-clear[type=search]{
            margin-bottom: 0;
            background-color: white;
            color: #222;
            border-radius: 15px;
            height: 30px;
            font-size: 14px;
            text-align: left;
        }
        .search-icon{
            width: 20px;
            position: absolute;
            right: 10px;
            top: 5px;
        }
        .mui-search input[type=search] {
            padding-left: 20px;
        }
        .tab-div{
            height: 50px;
            overflow: hidden;
            padding: 10px 0;
            text-align: center;
            position: relative;
        }
        .left-tab{
            width: 50%;
            height: 30px;
            float: left;
        }
        .right-tab{
            width: 50%;
            height: 30px;
            float: right;
        }
        .center-div{
            position: absolute;
            left: 50%;
            top: 18px;
            height: 16px;
            width: 1px;
            background-color: #999;
        }
        .tab-title{
            font-size: 16px;
            line-height: 30px;
            color: #666;
        }
        .tab-title-selected{
            color: #c53740;
            border-bottom: 3px solid #c53740;
        }
    </style>
</head>
<body>
    <div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
    <div class="base_navigation_bar base_style_color base_navigation_item_bar">
        <a class="base_left_item" href="#" onclick="backClick()">
            <img class="base_back_icon" src="../../image/icon_jiantou.png" alt="">
        </a>
        <span>企业列表信息</span>
        <a class="base_right_item base_hide_item">
        </a>
    </div>
    <div class="search-bar-div base_style_color">
        <div class="mui-input-row mui-search">
            <img onclick="onSearchClick()" class="search-icon" src="../../image/icon_search.png">
            <input id="course_search_input" type="search" class="mui-input-clear" placeholder="企业搜索">
        </div>
    </div>
    <div class="tab-div">
        <div class="left-tab">
            <span id="company" class="tab-title tab-title-selected">
                企业
            </span>
        </div>
        <div class="center-div"></div>
        <div class="right-tab">
            <span id="post" class="tab-title">
                岗位
            </span>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript">
    var type = 0;//默认企业
    $(document).ready(function(){
        $('.tab-title').click(function(){
            var currentTab = $(this);
            if (!currentTab.hasClass('tab-title-selected')) {
                $('.tab-title').removeClass('tab-title-selected');
                currentTab.addClass('tab-title-selected');
                if (currentTab.attr('id') == 'company') {
                    type = 0;
                    $('#course_search_input').attr('placeholder', '企业搜索');
                    api.setFrameGroupIndex({
                        name: 'newPracticeSearch',
                        index: 0,
                        scroll: true
                    });
                }else{
                    type = 1;
                    $('#course_search_input').attr('placeholder', '岗位搜索');
                    api.setFrameGroupIndex({
                        name: 'newPracticeSearch',
                        index: 1,
                        scroll: true
                    });
                }
            }
        });
    });
    apiready = function(){
        setupSubframe();
        setupSearchEnter();
    }
    function setupSubframe(){
        // var y = $('#BarAppearance').height() + $('.base_navigation_bar').height() + $('.search-bar-div').height() + $('.tab-div').height();
        var y = 170;
        var h = api.winHeight - y;
        api.openFrameGroup({
            name: 'newPracticeSearch',
            rect: {
                 x: 0, 
                 y: y, 
                 w: 'auto',
                 h: h
            },
            scrollEnabled: false,
            frames: [{
                name: 'NewPracticeCompanySearchList_frame', 
                url: 'NewPracticeCompanySearchList_frame.html',
                pageParam: {
                    type : 0
                }
            },{
                name: 'NewPracticeCompanySearchList_frame', 
                url: 'NewPracticeCompanySearchList_frame.html',
                pageParam: {
                    type : 1
                }
            }]
        }, function(ret, err) {
            
        });
    }
    function backClick(){
        api.closeWin();
    }
    function setupSearchEnter(){
        $('#course_search_input').bind('keydown',function(event){  
            if(event.keyCode == "13"){  
                onSearchClick();
            }  
        });
    }
    function onSearchClick(){
        var searchKeyword = $('#course_search_input').val();
        if ($('#course_search_input').val().replace(/(^\s*)|(\s*$)/g, "") == '') {
            return;
        }
        api.sendEvent({
            name: 'searchPracticeNotifi',
            extra: {
                type : type,
                keyword: searchKeyword
            }
        });
    }
</script>
</html>
